<template>
  <div>
    <my-header></my-header>
    <div class="content">
      <!-- 面包屑导航 -->
      <div>
        <Bread-Crumb ref="BNlabel"></Bread-Crumb>
        <!-- <ul class="breadcrumb">
				<li class="breadcrumb-item"><router-link to="#">结婚&nbsp</router-link></li>
				<li class="breadcrumb-item"><router-link :to="'/'">结婚图片&nbsp</router-link></li>
				<li class="breadcrumb-item"><router-link :to="'/picture'">婚纱照&nbsp</router-link></li>
				<li class="breadcrumb-item"><router-link to="#">古风婚纱照&nbsp中国式古风婚纱照片</router-link></li>
			</ul> -->
      </div>
      <!-- 标签导航栏 -->
      <div class="content_marks">
        <div class="content_mark_left">
          <img :src="searchlabeldetails.contentimgurl" alt="" />
        </div>
        <div class="content_mark_right">
          <h3>{{ searchlabeldetails.title }}</h3>
          <p>{{ searchlabeldetails.summarize }}</p>
          <h4>最新发布者</h4>
          <div class="content_mark_right_imgs">
            <!-- 作者图片栏遍历authorimgarr数据进行动态生产 -->
            <router-link
              :to="'javascript:;'"
              v-for="(imgurl, i) of authorimgarr"
              :key="i"
              ><img :src="imgurl" alt=""
            /></router-link>
          </div>
          <span class="">
            <ul>
              <span>相关标签:</span>
              <li>
                <router-link to="#">古风婚礼图片 中式婚礼图集</router-link>
              </li>
              <li><router-link to="#">中式复古婚纱照</router-link></li>
              <li><router-link to="#">中式婚纱</router-link></li>
            </ul>
          </span>
        </div>
      </div>
      <!-- 标签导航栏提示标签 -->
      <div class="content_mark content_search">
        <span>您是否在找:</span>
        <ul>
          <li v-for="(labelvalue, i) of labelarr" :key="i">
            <router-link
              :to="`/picturelabel/${homekeywords}/${labelvalue.Sdid}`"
              >{{ labelvalue.title }}</router-link
            >
          </li>
        </ul>
      </div>
      <!-- 主体内内容区域 -->
      <imgcontent :new_imgcontent="new_imgcontent"></imgcontent>
      <!-- 分页查询 -->
      <pages ref="pages" :pagelabel="pagelabel" :page="page"></pages>
      <!-- <mymap></mymap> -->
    </div>
    <my-footer></my-footer>
  </div>
</template>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #a9a4a4;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0px;
}
/* ****************************************************************************************************************************/
/* 声明标签区域样式 */
.content ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.content ul li {
  margin-bottom: 15px;
}
.breadcrumb {
  background-color: #fff;
}
.breadcrumb a {
  /* display:block; */
  font-size: 10px;
}
.breadcrumb-item:last-child a {
  color: #000;
}
.breadcrumb-item + .breadcrumb-item:before {
  content: ">";
}
.content_mark {
  border: 1px solid rgb(226, 223, 223);
  padding: 0px 25px;
  margin: 5px auto;
}
.content_mark_top,
.content_mark_middle,
.content_mark_bottom {
  display: flex;
  flex-wrap: nowrap;
  padding: 20px 0px 10px 0px;
}
.content_mark > div + div {
  border-top: 1px dashed rgb(226, 223, 223);
}
.content_mark ul {
  width: 1082px;
}
.content_mark span {
  display: block;
  width: 40px;
  margin-right: 30px;
  font-size: 14px;
  color: rgb(170, 166, 166);
}
.content_mark a {
  display: block;
  padding: 0px 7px;
  margin: 0 10px;
  font-size: 14px;
  color: rgb(109, 108, 108);
}
.content_mark li.active a {
  color: #f00;
  background-color: #fff;
  border: 1px solid rgb(242, 242, 242);
  border-radius: 4px;
}
.content_mark a {
  border: 1px solid #fff;
}
.content_mark a:hover {
  color: #f00;
  border: 1px solid #f00;
  border-radius: 4px;
}
/* ****************************************************************************************************************************/

/* 声明提示栏样式 */
.content_search {
  display: flex;
  flex-wrap: wrap;
  border: 0px;
  padding: 0px;
  margin: 20px 0px 10px 0px;
}
.content_search span {
  width: 100px;
  margin-right: 10px;
  font-size: 10px;
}
.content_search a {
  font-size: 10px;
}
.content_search a:hover {
  border: 1px solid #fff;
}
/* ****************************************************************************************************************************/

/* 声明内容主体区域样式 */
.content_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* border:1px solid rgb(201, 198, 198); */
}
.content_content_v {
  width: 23%;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border: 1px solid rgb(201, 198, 198);
}
.content_content_v img {
  width: 100%;
}
.content_content_title,
.content_content_label {
  padding: 5px 15px;
  display: flex;
  flex-wrap: nowrap;
}
.content_content_title {
  justify-content: space-between;
}
.content_content_title span {
  font-size: 14px;
  color: #5c5a5a;
}
.content_content_title a {
  color: #000;
  font-size: 15px;
}
.content_content_title a:hover {
  color: #f00;
}
.content_content_label {
  font-size: 10px;
}
.content_content_label img {
  width: 15%;
  border-radius: 50%;
}
.content_content_label div {
  margin: 0px 5px;
}
.content_content_label a {
  color: rgb(39, 119, 240);
}
.content_content_label a:hover {
  text-decoration: underline;
}
/* ******************************************************************************************** */
/* 分页查询样式 */
.content .limit {
  margin: 100px auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.content .limit ul {
  /* display:flex; */
  /* flex-wrap:nowrap; */
  justify-content: center;
  margin: 0px;
  padding: 0px 5px;
}
.content .limit ul li {
  margin: 0px;
}
.content .limit a {
  text-align: center;
  display: block;
  border: 1px solid rgb(206, 205, 205);
  padding: 2px;
  line-height: 30px;
  width: 32px;
}
.content .limit span a {
  width: 70px;
}
/* a标签伪类声明 */
li.active a {
  background: #f00;
  color: #fff;
}

.content .limit a:hover {
  color: #f00;
}

.content .limit a:active {
  background: #f00;
  color: #fff;
}
/* -------------------------------------------------------------- */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.content_marks {
  width: 1200px;
  height: 300px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  border: 1px solid rgb(225, 224, 224);
}
.content_mark_left {
  width: 488px;
}
.content_mark_right {
  /* width:700px; */
  padding: 25px;
}
.content_mark_right p,
.content_mark_right h4,
.content_mark_right ul {
  margin: 10px 0px;
}
.content_mark_right p {
  font-size: 13px;
}
.content_mark_right_imgs {
  width: 45%;
  padding: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.content_mark_right_imgs img {
  width: 100%;
  border-radius: 50%;
}
.content_marks ul {
  font-size: 13px;
}
.content_marks li a {
  color: rgb(103, 146, 226);
  padding: 0 10px;
}
.content_marks li a:hover {
  text-decoration: underline;
}
</style>
<script>
import axios from "axios";
import imgcontent from "../components/sukai/imgcontent.vue";
import pages from "../components/sukai/pages.vue";
import BreadCrumb from "../components/sukai/breadcrumb.vue";
// import mymap from '../components/sukai/Map'

export default {
  props: ["homekeywords", "searchlabelid"],
  data() {
    return {
      BNlabel: "", //面包屑导航数据数组
      searchvalue: "", //搜索
      authorimgarr: {}, //作者栏图组
      keywords: 0, //
      searchlabeldetails: [], //查询标签详情
      labelarr: [], //标签数组
      new_imgcontent: [], //主题区域加载数据
      page: 1, //当前页码(默认为1)
      pagelabel: "", //页码编号数据
    };
  },
  methods: {
    // 0. 加载查询标签列
    loadsearchlabel() {
      console.log(this.homekeywords),
        axios
          .get("/picture/picsearchlabel", {
            params: {
              Psid: `${this.homekeywords}`,
            },
          })
          .then((results) => {
            console.log(results.data, this.labelarr);
            this.labelarr = results.data;
            console.log("zheshi", this.labelarr);
            // console.log(this.labelarr[0][0].Psid)
          });
    },
    // 1. 加载作者信息栏
    loadauthor() {
      console.log(this.searchlabelid);
      axios
        .get("/picture/searchlabeldetails1", {
          params: { Sdid: this.searchlabelid },
        })
        .then((result) => {
          this.searchlabeldetails = result.data[0];
          console.log(result.data, this.searchlabeldetails);
          var i = 0;
          var arr1 = {};
          for (var k in result.data[0]) {
            if (
              i > 3 &&
              i < 9 &&
              result.data[0][k] !== "" &&
              result.data[0][k] !== " "
            ) {
              arr1[i] = result.data[0][k];
            }
            i++;
          }
          this.authorimgarr = arr1;
          console.log(this.authorimgarr);
        });
    },
    // 2. 加载主体内容区域内容
    loadimgcontent() {
      axios
        .get("/picture/picturedetail", {
          params: { Psid: `${this.homekeywords}`, page: `${this.page}` },
        })
        .then((result) => {
          console.log("这是标签页面重新加载的数据:", result.data);
          this.new_imgcontent = this.new_imgcontent = result.data;
          // 判断添加imgurlcount属性
          // ------------------------------------------------------------
          this.new_imgcontent.forEach(function (elem, i) {
            console.log(elem);
            var i = 0;
            for (var k in elem) {
              if (k.indexOf("url") != -1) {
                if (elem[k] != undefined || elem[k] != "" || elem[k] != " ") {
                  // console.log(elem[k])
                  i++;
                }
              }
            }
            // console.log(i)
            elem.imgurlcount = i;
          });
          // ------------------------------------------------------------
        });
    },
    // 3. 获取模块分页页码总数(设置每页显示20条)
    loadpagelabel() {
      axios
        .get("/picture/pagecount", { params: { Psid: `${this.homekeywords}` } })
        .then((result) => {
          this.pagelabel = result.data[0].count;
          console.log(result);
          this.pagelabel = Math.ceil(parseInt(this.pagelabel) / 20);
          console.log(this.pagelabel);
          this.$refs.pages.pageArray(this.page, this.pagelabel);
        });
    },
    // 4. 点击页码进行分页查询
    limitloadimg_content(pages) {
      //当页码在1-最大页码之间,并且不等于本页页码时重新加载数据改变当前主体内容区域数据
      if (pages >= 1 && pages <= this.pagelabel && pages != this.page) {
        if (pages > 1) {
          this.prev = true;
        } //首页设置上一页不显示
        if (pages == this.pagelabel) {
          this.next = false;
        } //尾页设置下页不显示
        this.page = pages; //设置页码为点击页码
        // console.log(pages,this.page,this.pagelabel);
        axios
          .get("/picture/picturedetail", {
            params: { Psid: `${this.homekeywords}`, page: `${pages}` },
          })
          .then((result) => {
            console.log(
              `这是二级页面第${pages}页加载的内容加载的数据:`,
              result.data
            );
            this.new_imgcontent = result.data; //对主体区域内容进行替换更新
            // 判断添加imgurlcount属性
            // ------------------------------------------------------------
            this.new_imgcontent.forEach(function (elem, i) {
              console.log(elem);
              var i = 0;
              for (var k in elem) {
                if (k.indexOf("url") != -1) {
                  if (elem[k] != undefined || elem[k] != "" || elem[k] != " ") {
                    // console.log(elem[k])
                    i++;
                  }
                }
              }
              // console.log(i)
              elem.imgurlcount = i;
            });
            // ------------------------------------------------------------
          });
      }
    },
    loadBNlabel() {
      axios.get("/picture/bnlabel").then((result) => {
        console.log("这是面包屑导航的数据:", result.data);
        this.BNlabel = result.data;
        this.BNlabel = this.BNlabel[this.homekeywords];
        this.BNlabel.disi_title = this.searchlabeldetails.title;
        console.log(this.searchlabeldetails.title, this.BNlabel);
        this.$refs.BNlabel.jiazaiBNlabel(this.BNlabel);
      });
    },
  },
  created() {},
  mounted() {
    window.scrollTo(0, 0);
    this.keywords = parseInt(this.searchlabelid);
    // this.fun();
    this.loadimgcontent();
    this.loadsearchlabel();
    this.loadauthor();
    //加载页码总数
    this.loadpagelabel();
    // 给面包屑导航添加标签页级数据
    // (function(){
    // 	this.BNlabel.disi_title=this.searchlabeldetails.title;
    // 	console.log(this.BNlabel)
    // })()
    this.loadBNlabel();
  },
  components: { imgcontent, pages, BreadCrumb },
};
</script>


